<template>
  <div class="category">
    <div class="category-center">
      <div class="top">
        <p class="iconfont" :class="icon">{{title}}</p>
        <p>MORE</p>
      </div>
      <div class="category-container">
        <div :style="{background: listColor}" class="tab-list">
          <p class="en-title">GLOBAL</p>
          <p class="en-title">HOT SALE</p>
          <p class="zh-title">热销榜单产品</p>
          <ul>
            <li 
              v-for="(item, index) in tabList"
              @mouseenter="activeList = index"
              :class="{'active': activeList === index}"
            >{{item}}</li>
            <li
              class="remove-animation"
              :style="{top: activeList + 'rem'}"
            >
              <span themeLinear></span>
              <span></span>
            </li>
          </ul>
          <div class="circle"></div>
        </div>
        <div class="product-container">
          <div v-for="i in 8" class="product-wrapper">
            <div class="img-wrapper">
              <img src="https://images.beske.com/2fangbiansushisushiroulei.png">
            </div>
            <p class="name" ellipsis>产品名称</p>
            <div class="price-wrapper">
              <p class="price">$ 100</p>
              <p class="like">XXX人感兴趣</p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Category',
  // icon          图标
  // listColor     列表背景色
  // title         标题
  // tabList       每项列表文字
  props: ['icon', 'listColor', 'title', 'tabList'],
  data () {
    return {
      activeList: 0
    }
  },
  methods: {

  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
.category {
  background: #f9f9f9;
  margin-bottom: 1.6rem;
  .category-center {
    width: 24rem;
    margin: 0 auto;
    .top {
      display: flex;
      justify-content: space-between;
      align-items: center;
      p:first-child {
        font-size: .48rem;
        font-weight: bolder;
        &:before {
          color: #FB5005;
          margin-right: .2rem;
          
        }
      }
      p:last-child {
        cursor: pointer;
      }
    }
    .category-container {
      flex: none;
      height: 13rem;
      margin-top: .4rem;
      display: flex;
      .tab-list {
        width: 4.8rem;
        box-sizing: border-box;
        padding-top: .8rem;
        position: relative;
        overflow: hidden;
        .en-title {
          font-size: .56rem;
          font-weight: bolder;
          text-indent: .6rem;
          line-height: .6rem;
        }
        .zh-title {
          font-size: .28rem;
          text-indent: .65rem;
          margin-top: .2rem;

        }
        ul {
          margin-top: 1.2rem;
          position: relative;
          li {
            height: 1rem;
            font-size: .36rem;
            text-indent: .5rem;
            color: #555;
            position: relative;
            z-index: 1;
            display: flex;
            align-items: center;
            transition: all .3s;
            cursor: pointer;
            font-weight: bolder;
            &:before {
              transition: all .3s;
              content: '⚪';
              margin-right: .1rem;
              color: transparent;
            }
          }
          .active {
            color: #fff;
            &:before {
              color: #fff;
            }
          }
          .remove-animation {
            position: absolute;
            z-index: 0;
            display: flex;
            top: 0;
            transition: all .2s;
            span:first-child {
              width: 3rem;
              height: 1rem;
            }
            span:last-child {
              width: 0;
              height: 0;
              border-left: .4rem solid #FB2005;
              border-top: .5rem solid transparent;
              border-bottom: .5rem solid transparent;
            }
            &:before {
              content: unset;
            }
          }
        }
        .circle {
          position: absolute;
          bottom: 0;
          width: 100%;
          height: 0;
          padding-bottom: 100%;
          background: radial-gradient(#fff, rgba(255, 255, 255, 0) 70%);
          margin-bottom: -50%;
          border-radius: 50%;
        }
      }
      .product-container {
        background: #fff;
        flex: 1;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: center;
        .product-wrapper {
          width: 4.6rem;
          height: 6rem;
          // background: #ccc;
          box-sizing: border-box;
          padding: .2rem;
          .img-wrapper {
            width: 4.2rem;
            height: 4.2rem;
            img {
              width: 100%;
              height: 100%;
              object-fit: contain;
            }
          }
          .name {
            margin-top: .3rem;
            line-height: .4rem;
            height: .4rem;
            font-size: .28rem;
          }
          .price-wrapper {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-top: .1rem;
            .price {
              font-size: .36rem;
              color: red;
              font-weight: bolder;
            }
            .like {
              font-size: .28rem;
            }
          }
        }
      }
    }
  }
}
</style>